<template>
	<view class="recommendContainer">
		<swiper class="banners" :indicator-dots="true" :autoplay="true" :interval="3000">
			<swiper-item>
				<view class="swiper-item">
					<image class="bannerImg" src="https://yanxuan.nosdn.127.net/static-union/165811167537b102.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image class="bannerImg" src="https://yanxuan.nosdn.127.net/static-union/165811167537b102.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image class="bannerImg" src="https://yanxuan.nosdn.127.net/static-union/1658129498000030.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- policyDescList 三个图标区域 -->
		<view class="policyList">
			<view class="policyItem" v-for="(item,index) in indexData.policyDescList" :key="item.desc">
				<image class="policyImg" :src="item.icon"></image>
				<text class="content">{{item.desc}}</text>
			</view>
		</view>
		<!-- kingKongList 10个图标区域 -->
		<view class="kingKongList" v-if="indexData.kingKongModule">
			<view class="kingKongItem" v-for="item in indexData.kingKongModule.kingKongList" :key="item.L1Id">
				<image class="kingImage" :src="item.picUrl"></image>
				<text class="kingContent">{{item.text}}</text>
			</view>
		</view>
		<!--categoryModule 分类区域 -->
		<view class="categoryModuleContainer">
			<view class="categoryItem" v-for="item in indexData.categoryModule" :key="item.titlePicUrl">
				<image class="titlePic" :src="item.titlePicUrl" mode=""></image>
				<scroll-view class="shopListScroll" scroll-x="true" enable-flex="true">
					<view class="shopItem" v-for="shopItem in item.itemList" :key="shopItem.id">
						<image class="shopImg" :src="shopItem.showPicUrl"></image>
						<view class="shopInfo">{{shopItem.name}}</view>
					</view>
					<view class="shopItem more">查看更多</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		computed:{
			...mapState({
				indexData:state=>state.home.indexData
			})
		}
	}
</script>

<style lang="stylus">
	.recommendContainer
		.banners
			width 100%
			height 350rpx
			.bannerImg
				width 100%
				height 350rpx
		.policyList 
			display flex
			.policyItem
				flex 1
				text-align center
				.policyImg
					width 32rpx
					height 32rpx
					vertical-align middle
				.content
						font-size 24rpx
		.kingKongList
			display flex
			flex-wrap wrap
			.kingKongItem
				width 20%
				display flex
				flex-direction column
				align-items center
				.kingImage
					width 110rpx
					height 110rpx
					margin 20rpx 0
				.kingContent
					font-size 26rpx

		.categoryModuleContainer
			.categoryItem
				margin-bottom 20rpx
				.titlePic
					 width 100%
					 height 370rpx
				.shopListScroll
					// display flex
					white-space nowrap
					.shopItem
						display inline-block
						width 200rpx
						vertical-align top
						margin-right 20rpx
						&.more 
							width 200rpx
							height 200rpx
							background #eee
							font-size 28rpx
							text-align center
							line-height 200rpx
						.shopImg
							width 200rpx
							height 200rpx
							background #eee
						.shopInfo
							font-size 26rpx
							white-space pre-wrap
							display -webkit-box
							-webkit-line-clamp 2
							-webkit-box-orient vertical
							text-overflow ellipsis
							overflow hidden
							
						
.test		
		font-size 0
</style>